<template>
  <div class="all">
      <header>
        <div class="div" @click="back()">
          <img src="../../../assets/返回.png" alt="" />
          <span class="solid">返回</span>
        </div>
        <div class="div">
          <span>移动到分组</span>
        </div>
        <div class="div">
          <span class="solid"></span>
        </div>
      </header>

    <!-- main -->
    <div class="main">
      <van-field
        v-for="(item, index) in pgroupList"
        :key="item.id"
        type="text"
        readonly
        :label="item.pgroup_name"
        @click="move(item.id, item.pgroup_name)"
      >
        <template #label>
          <van-icon name="arrow" />
          <h style="font-size: 15px; margin-buttom: 5px">{{
            item.pgroup_name
          }}</h>
        </template>
      </van-field>
    </div>
    <div style="height: 100px"></div>

    <!-- 确认移动 -->
    <van-dialog
      v-model="moveshow"
      title="确定移动到该分组吗？"
      show-cancel-button
      @confirm="moveg()"
      confirm-button-color="blue"
    >
    </van-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      team_id: this.$route.query.team_id,
      copy_id: this.$route.query.copy_id,
      pgroupList: [],
      pgroupPatientList: [],
      pgroup_id: this.$route.query.pgroup_id,
      patient_user_id: this.$route.query.patient_user_id,
      move_pgroup_id: 0,
      move_pgroup_name: '',
      moveshow:false,
    }
  },
  methods: {
    // 返回
    back() {
      this.$router.history.go(-1)
    },
    // getfindTeamPgroupPatient
    // 获取分组数据
    getfindTeamPgroupPatient() {
      this.$http
        .findTeamPgroupPatient({
          team_id: this.team_id,
        })
        .then((res) => {
          console.log(res)
          if (res.data.status === 'success') {
            if (res.data.data == null) {
              this.$toast('暂无数据！')
            } else {
              this.pgroupList = res.data.data.pgroupList
              this.pgroupPatientList = res.data.data.pgroupPatientList
              //   this.$toast('成功！')
              console.log(this.pgroupPatientList)
            }
          } else {
            this.$toast('暂无数据！')
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 选择分组
    move(id, name) {
      this.move_pgroup_id = id
      this.move_pgroup_name = name
      if(this.pgroup_id==99 ||this.copy_id==1){
        if(this.pgroup_id==this.move_pgroup_id){
          this.$toast("人员已在该组中")
        }else{
          // 新增分组下人员
          this.savePgroupPatient()
          this.back()
        }
      }else{
        if(this.pgroup_id==this.move_pgroup_id){
          this.$toast("人员已在该组中")
        }else{
          this.moveshow=true
        }
      }
    },
    // 确认弹窗
    moveg(){
      this.movePgroupPatient()
      this.back()
    },
    // movePgroupPatient
    // 移动分组下人员
    movePgroupPatient() {
      this.$http
        .movePgroupPatient({
          team_id: this.team_id,
          pgroup_id: this.pgroup_id,
          move_pgroup_id: this.move_pgroup_id,
          patient_user_id: this.patient_user_id.substr(1),
        })
        .then((res) => {
          console.log(res)
          if (res.data.status === 'success') {
            this.$toast('移动成功！')
          } else {
            this.$toast('分组下已有该人员，无需移动！')
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // savePgroupPatient
    // 新增分组下人员
    savePgroupPatient() {
      this.$http
        .savePgroupPatient({
          team_id: this.team_id,
          pgroup_id: this.move_pgroup_id,
          patient_user_id: this.patient_user_id.substr(1),
        })
        .then((res) => {
          console.log(res)
          if (res.data.status === 'success') {
            this.$toast('成功！')
          } else {
            this.$toast('暂无数据！')
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
  mounted() {
    this.getfindTeamPgroupPatient()
  },
}
</script>
<style lang="sss" scoped>
/* header divwai div 是标题布局 */
.all {
  width: 100%;
  height: 100%;
  background: #faf9fe;
  overflow: auto;
  font-size: 15px;
  font-family: PingFang SC;
}
header {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  background: white;
  position: sticky;
  top: 0;
  z-index: 9;
}
.div {
  width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: 'PingFang SC';
  font-size: 15px;
  font-weight: bold;
}
.div img {
  margin-right: 5px;
}
.div:nth-child(1) img {
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img {
  margin-right: 5px;
  width: 13px;
  height: 13px;
}
.div:nth-child(3) span {
  margin-right: 15px;
}
.div:nth-child(2) {
  justify-content: center;
}
.div:nth-child(3) {
  justify-content: flex-end;
}
.solid {
  color: #1da4f2;
}
</style>